<!-- 项目堆场 swx-->
<template>
  <div class="noteCfg">
    <el-row>
      <el-col :span="24">
        <el-col :span="12"
                :offset="12"
                class="head-style">

          <el-form :inline="true"
                   :model="form"
                   class="head-style-right">
            <el-col :span="10"
                    class="col-10-top-style">
              <el-cascader v-model="form.address"
                           id="headCascader"
                           :options="addressOptions"
                           change-on-select
                           @change="selectAddress"
                           placeholder="请选择地址"
                           size="medium"></el-cascader>
            </el-col>
            <el-col :span="11"
                    class="col-10-top-style">
              <el-input v-model="form.pro_name"
                        placeholder="请输入项目名称"
                        @keyup.enter.native="onSearch">
              </el-input>
            </el-col>
            <el-col :span="3"
                    class="col-3-style">
              <el-button type="primary"
                         class="but-style"
                         @click="onSearch">查询</el-button>
            </el-col>

          </el-form>
        </el-col>
      </el-col>
      <el-col :span="24"
              class="mid-table-box">
        <el-table :data="tableData"
                  height="700"
                  border
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column label="序号"
                           align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index+(page - 1)*10 + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="project_name"
                           label="项目名称"
                           align="center"
                           show-overflow-tooltip>
            <!-- <template slot-scope="scope">
              <el-tooltip class="item"
                          effect="dark"
                          :content="scope.row.pro_name"
                          placement="top">
                <span>{{ scope.row.nickname }}</span>
              </el-tooltip>
            </template> -->
          </el-table-column>
          <el-table-column label="配置人数"
                           align="center"
                           prop="sms_admin_total"
                           show-overflow-tooltip>
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.count_sms }}</span>
            </template> -->
          </el-table-column>
          <el-table-column label="更新时间"
                           align="center"
                           prop="updated_at"
                           show-overflow-tooltip>
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.update_time }}</span>
            </template> -->
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           width="185px">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="primary"
                         icon="el-icon-view"
                         @click="previewNote(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              class="footer-box">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="requestParam.page"
                       :page-size="pageSize"
                       @size-change="handleSizeChange"
                       :page-sizes="[10,20,30,40,50,100]"
                       layout="total,  sizes,prev, pager, next, jumper"
                       :total="pageTotal">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { noteSettingApi } from "@/services/SystemSetting";

export default {
  data () {
    return {
      pageSize: 10,
      requestParam: {
        page: 1,
      },
      form: {
        pro_name: '',
        address: [],
        province_id: '',
        city_id: '',
        district_id: '',

      },
      addressOptions: [],
      tableData: [],
      pageTotal: 0,
      page: 1,
      //uuid: this.$route.query.uuid,
      uuid: 1,
    }
  },
  methods: {
    //地址数据
    getAddressData () {
      fetch(`/static/area.json`, {
        method: 'get',
        headers: {
          'Content-Type': 'application/json'
        },
      }).then(res => {
        return res.json()
      }).then(res => {
        this.addressOptions = res.data;
        this.addressOptions.unshift({
          label: '全部',
          value: ''
        })
      })
    },
    //选择地址
    selectAddress (value) {
      if (value.length == 1) {
        this.form.province_id = value[0];
        this.form.city_id = '';
        this.form.district_id = '';
      } else if (value.length == 2) {
        this.form.province_id = value[0];
        this.form.city_id = value[1];
        this.form.district_id = '';
      } else {
        this.form.province_id = value[0];
        this.form.city_id = value[1];
        this.form.district_id = value[2];
      };
      this.requestParam.page = 1;
      this.getProjectData()
    },
    //查询事件
    onSearch () {
      this.requestParam.page = 1;
      this.getProjectData()
    },
    //获取数据
    getProjectData () {
      noteSettingApi.getProjectSmsLists({
        params: {
          province_no: this.form.province_id,
          city_no: this.form.city_id,
          area_no: this.form.district_id,
          project_name: this.form.pro_name,
          page: this.requestParam.page,
          per_page: this.pageSize
        }
      }).then((res) => {
        this.tableData = res.data.data;
        this.pageTotal = res.data.total;
      }).catch((error) => {
        console.log(error)
      })
    },
    //查看
    previewNote (row) {
      this.$router.push({ path: 'projectNote', query: { project_id: row.project_id, project_name: row.project_name } })
    },
    //分页
    handleCurrentChange (page) {
      this.requestParam.page = page;
      this.getProjectData()
    },
    //每页显示的条数
    handleSizeChange (val) {
      this.requestParam.page = 1;
      this.pageSize = val;
      this.getProjectData();
    }
  },
  created () {
    this.getAddressData();
    this.getProjectData();
  }
}
</script>
<style lang="scss" scoped>
.noteCfg {
  padding: 20px;
}
#headCascader {
  width: 100% !important;
}
.mid-table-box {
  margin-top: 20px;
}
.but-style {
  width: 100% !important;
}
.col-3-style {
  text-align: right;
}
.col-10-top-style {
  padding-right: 12px;
}
/deep/ .el-cascader .el-input__inner {
  cursor: pointer;
  height: 40px !important;
}
.footer-box {
  padding-top: 20px !important;
  text-align: center;
}
</style>